// 显示登录状态
import {login, register} from "./apidata.js";

export function addAuth() {
    // 默认不显示注册登录页面
    hideRegisterForm();
    hideLoginForm();

    // 根据本地存储信息控制登录状态显示，如本地有成功登录的账号，则显示user；否则显示登录/注册链接
    const username = localStorage.getItem('username');
    if (username) {
        hideLoginRegister();
        showUser(username);
    } else {
        hideUser();
        showLoginRegister();
    }

    // 注册链接
    addClickRegisterListener();

    // 登录链接
    addClickLoginListener();

    // 注册表单提交
    addClickRegisterSubmitListener();

    // 登录表单提交
    addClickLoginSubmitListener();

    // 头像
    addClickMenuListener();

    // 下拉菜单--用户中心 TODO

    // 下拉菜单--个人中心
    addClickUserInfoListener()

    // 下拉菜单--切换账号
    addClickSwitchAccountListener();

    // 下拉菜单--退出登录
    addClickLogoutListener();
}

function hideUser() {
    let user = document.getElementById('user');
    user.classList.add('hidden');
}

function showUser(username) {
    let user = document.getElementById('user');
    user.classList.remove('hidden');
    user.innerText = username;
}

function hideRegisterForm() {
    let registerForm = document.getElementById('registerForm');
    registerForm.classList.add('hidden');
}

function showRegisterForm() {
    let registerForm = document.getElementById('registerForm');
    registerForm.classList.remove('hidden');
}

function hideLoginForm() {
    let loginForm = document.getElementById('loginForm');
    loginForm.classList.add('hidden');
}

function showLoginForm() {
    let loginForm = document.getElementById('loginForm');
    loginForm.classList.remove('hidden');
}

function showUserItem() {
    let userItem = document.getElementById('userItem');
    userItem.classList.remove('hidden');
}

function hideLoginRegister() {
    let loginRegisterUL = document.getElementById('login-register');
    loginRegisterUL.classList.add('hidden');
}

function showLoginRegister() {
    let loginRegisterUL = document.getElementById('login-register');
    loginRegisterUL.classList.remove('hidden');
}

function hideLeftSide() {
    let leftSide = document.getElementById('left-side');
    leftSide.classList.add('hidden');
}

function showLeftSide() {
    let leftSide = document.getElementById('left-side');
    leftSide.classList.remove('hidden');
}

function hideRightSide() {
    let rightSide = document.getElementById('right-side');
    rightSide.classList.add('hidden');
}

function showRightSide() {
    let rightSide = document.getElementById('right-side');
    rightSide.classList.remove('hidden');
}

// 给注册链接增加点击监听器
function addClickRegisterListener() {
    let register = document.getElementById('register');
    register.addEventListener('click', function (event) {
        hideLeftSide();
        hideRightSide();
        hideLoginForm();
        showRegisterForm();
    });
}

// 给登录链接增加点击监听器
function addClickLoginListener() {
    let register = document.getElementById('login');
    register.addEventListener('click', function (event) {
        hideLeftSide();
        hideRightSide();
        showLoginForm();
        hideRegisterForm();
    });
}

// 给登录按钮增加点击监听器
function addClickLoginSubmitListener() {
    let loginForm = document.getElementById('loginForm');
    loginForm.addEventListener('submit', function (event) {
        let username = document.getElementById('login-username').value;
        let password = document.getElementById('login-password').value;
        login(username, password).then(() => {
            localStorage.setItem('username', username);
            showLeftSide(); // 显示左侧tabs
            showRightSide(); // 显示右侧页面
            hideLoginForm(); // 隐藏登录页
            showUser(username); // 显示账号名称
            hideLoginRegister(); // 隐藏注册/登录链接
        });
    });
}

// 给注册按钮增加点击监听器
function addClickRegisterSubmitListener() {
    let loginForm = document.getElementById('registerForm');
    loginForm.addEventListener('submit', function (event) {
        let username = document.getElementById('register-username').value;
        let password = document.getElementById('register-password').value;

        register(username, password).then(() => {
            showLoginForm(); // 显示登录页
            hideRegisterForm(); // 隐藏注册页
        });
    });
}

// 给头像增加点击菜单
function addClickMenuListener() {
    const user = document.getElementById('user');
    user.addEventListener('click', function (event) {
        let menu = document.getElementById('menu');
        if (menu) {
            if (menu.style.display === 'none') {
                menu.style.display = 'block'; // 点击按钮显示菜单
            } else {
                menu.style.display = 'none'; // 再次点击隐藏菜单
            }
            event.stopPropagation();
        }
    });

    document.addEventListener('click', function (event) {
        let menu = document.getElementById('menu');
        if (menu && menu.style.display === 'block' && event.target !== menu) {
            menu.style.display = 'none';
            event.stopPropagation();
        }
    })
}

// 给菜单里的个人中心增加点击监听器
function addClickUserInfoListener() {
    let userInfoLink = document.getElementById("userInfo");
    userInfoLink.addEventListener("click", function (event) {
        event.preventDefault();

        hideLeftSide();
        hideRightSide();
        showUserItem()

        event.stopPropagation();
    });


}


// 给菜单里的切换账号增加点击监听器
function addClickSwitchAccountListener() {
    let switchAccountLink = document.getElementById("switchAccount");
    switchAccountLink.addEventListener("click", function (event) {
        // 阻止默认的链接跳转行为
        event.preventDefault();

        hideLeftSide();
        hideRightSide();
        showLoginForm();
        hideRegisterForm();

        event.stopPropagation();
    });
}

// 给菜单里的退出登录增加点击监听器
function addClickLogoutListener() {
    const logout = document.getElementById('logout');
    logout.addEventListener('click', function (event) {
        event.preventDefault();

        localStorage.removeItem('username');

        let menu = document.getElementById('menu');
        if (menu) {
            menu.style.display = 'none';
        }

        hideUser();
        showLoginRegister();

        event.stopPropagation();
    })
}